<template>
  <div>
    <div ref="hour" style="width:100%;height: 500px;" />
  </div>
</template>

<script>
/**
     *
     */
import echarts from 'echarts'

export default {
  name: 'Hour',
  props: ['month', 'day'], // month : 要显示的月份
  data() {
    return {

      monthVisible: false,
      chart: null,
      // sql -- 按每月的每周统计
      weekData: [{ 'number': 6, 'shour': 0.0 }, { 'number': 36, 'shour': 2.0 }, { 'number': 55, 'shour': 3.0 }, { 'number': 62, 'shour': 4.0 }, { 'number': 371, 'shour': 5.0 }, { 'number': 941, 'shour': 6.0 }, { 'number': 2025, 'shour': 7.0 }, { 'number': 4319, 'shour': 8.0 }, { 'number': 5838, 'shour': 9.0 }, { 'number': 6164, 'shour': 10.0 }, { 'number': 4661, 'shour': 11.0 }, { 'number': 3669, 'shour': 12.0 }, { 'number': 3873, 'shour': 13.0 }, { 'number': 3593, 'shour': 14.0 }, { 'number': 3335, 'shour': 15.0 }, { 'number': 2742, 'shour': 16.0 }, { 'number': 1754, 'shour': 17.0 }, { 'number': 1504, 'shour': 18.0 }, { 'number': 2310, 'shour': 19.0 }, { 'number': 2870, 'shour': 20.0 }, { 'number': 2803, 'shour': 21.0 }, { 'number': 2225, 'shour': 22.0 }, { 'number': 761, 'shour': 23.0 }] // 模拟数据
    }
  },
  computed: {
    panelStyle() {
      return `position: fixed;left: 50%;top: ${this.offsetY}px; transform:translateX(-50%);border:2px solid yellow;`
    }

  }, mounted() {
    this.chart = echarts.init(this.$refs.hour)
    const option = {
      title: {
        text: '2012年3月20日',
        x: 'center'
      },
      dataset: {
        dimensions: ['number', 'shour'],
        source: this.weekData
      },
      xAxis: {
        type: 'category', name: '时间', nameTextStyle: {
          fontSize: 20
        },
        axisLabel: {
          formatter: function(value, index) {
            return `${value}点`
          }
        }
      },
      // 声明一个 Y 轴，数值轴。
      yAxis: {
        type: 'value', name: '访问次数', nameTextStyle: {
          fontSize: 20
        }
      },
      series: [
        {
          type: 'line',
          encode: {
            x: 'sweek',
            y: 'number'
          },
          symbolSize: function(val) {
            return 20
          },
          lineStyle: {
            normal: {
              color: 'green',
              width: 4,
              type: 'dashed'
            }
          },
          itemStyle: {
            normal: {
              borderWidth: 3,
              borderColor: 'red',
              color: 'black'
            }
          }
        }
      ]
    }
    this.chart.setOption(option)
    var _this = this
    this.chart.on('mouseover', function(params) {
      _this.monthVisible = true
      console.log(params)
    })
    this.chart.on('mouseout', function(params) {
      // _this.monthVisible = false;
    })
  }
}
</script>

<style scoped>

</style>
